<template>
    <div id="index" class="index">
        <Map ref="childMap" v-if="mapData != null" :mapData="mapData" :lineId="lineId"  class="map-height" @sendMusicId="getMusic" @sendPlayId="getPlayId" @sendPlayId2="getPlayId2" @sendPlayId3="getPlayId3"></Map>
        
        <!-- 音频组件 -->
        <VueAudio v-show="audioUrl != null" ref="audioX" :audioUrl="audioUrl" :audioName="audioName" style="position: absolute; z-index: 999; width:100%" @audioMax="getMax" @playStatus="getPlayStatus" @currentTime="getCurrentTime" @closeAudio="clearAudio"></VueAudio>
        <!-- 景区概况弹窗 -->
        <van-popup v-model="popupShow" class="popup-wrap" :lock-scroll="false" position="bottom"  >
            <h3 class="popup-tit">景区概况 <i @click="closePopup('popupShow')" class="iconfont  iconcha1 close"></i></h3>
            <Scroll class="scroll-wrapper" ref="listScroll" style=""  >
                <div class="scroll">
                    <PopupDetails :about="popupDetails" :progressData="audioData" @voiceUrl="audioPlay" @toTime="getToTime" >
                        <template #hd="hd">景区简介</template>
                    </PopupDetails>
                </div>
            </Scroll>
        </van-popup>

        <van-popup v-model="popupLines"  class="popup-lines" :lock-scroll="false" position="bottom">
            <div class="hd">推荐路线<i @click="closePopup('popupLines')" class="iconfont  iconcha1 close"></i></div>
            <ul class="bd">                       
                            
                <li v-for="(item,index) in ways" :class="{act:lineId == index}" @click="changeLines(index)" :keys="item.id"><em>{{item.sort}}.{{item.name}}</em><span>总计:{{item.distance}}米</span><i></i></li>
            </ul>
        </van-popup>
        <BottomNav v-on:changeShow="popShow"></BottomNav>
    </div>
</template>

<script>
// import axios from 'axios';
import Map from '@/components/Map';
import BottomNav from '@/components/BottomNav';
import PopupDetails from '@/components/PopupDetails'
import VueAudio from '@/components/VueAudio'

import {Toast } from 'vant'

import Scroll from '@/components/Scroll'
export default {
    name: 'Scenic',
    components: {
        Map, BottomNav, PopupDetails,Scroll,VueAudio
    },
    data () {
        return {
            scenicId:null,
            popupShow:false,
            popupLines:false,
            scenicAbout:null,
            popupDetails:null,
            lineId:null,
            ways:[],
            distanceA:[],
            mapData:null,
            audioData:{
                playing:false,
                value:0,
                currentTime:0,
                maxTime:0
            },
            audioDataPlay:{
                playing:false,
                value:0,
                currentTime:0,
                maxTime:0
            },
            audioUrl:null,
            audioName:null
        }
    },
    created(){

        this.scenicId =this.$route.query.id
        // this.scenicId =1;

        const toast = Toast.loading({
          mask: true,
          message: '加载中...'
        })
        console.log(L)
        this.axios.post('/info',this.qs.stringify({id:this.scenicId}),{emulateJSON:true})
            .then((response) =>{
                this.mapData =response.data.data
                this.ways=this.mapData.ways                
                console.log(this.ways)
                
                // 路线距离
                let distance=[]
                for(let i in this.ways){
                    // latlngList.push=
                    let latlngList=eval(this.ways[i].latlng_list)
                    
                            distance[i]=0
                            // console.log(i+'aa')
                    for(let j in latlngList){
                        // let distance ;
                        if(j != 0){
                            // console.log(j+'aa')
                            let a=L.latLng(latlngList[j-1])
                            distance[i] +=a.distanceTo(L.latLng(latlngList[j]))
                            
                        }
                        // console.log('a'+distance)
                        // console.log(i+':'+this.ways[i].distance)
                    }

                    this.ways[i].distance=Math.round(distance[i]);
                    // console.log('qqq'+this.ways[i].distance)
                }
                toast.clear();
            },(error) =>{
                console.log(error)
            })
    },
    mounted() {
        
        
    },
    methods:{
        popShow (num){
            switch (num) {
                case 1:
                    this.$refs.childMap.closeAutoBobao2()
                    if(this.scenicAbout != null){
                        this.popupDetails =this.scenicAbout
                        this.isAudio()
                        this.popupShow =true
                    }else{
                        this.getAbout()
                    }
                    break;
                case 2:
                    this.popupLines = true
                    // console.log(2)
                    break;
                case 3:
                    this.$router.push('/list')
                    break;
                default:
            }
        },
        getAbout (){ //请求景区概况信息

            const toast = Toast.loading({
              mask: true,
              message: '加载中...'
            })
            this.axios.post('/scenic/info',this.qs.stringify({id:this.scenicId}),{emulateJSON:true})
                .then((response) => {
                    this.scenicAbout = response.data.data

                    this.popupDetails =this.scenicAbout

                    this.isAudio()
                    this.popupShow = true
                    toast.clear()
                })
        },
        closePopup(popupName){//弹窗关闭
            this[popupName]=false;
        },
        changeLines(num){ //线路切换
            // console.log(1)
            if(this.lineId == num){
                this.lineId = 9999
            }else{

                this.lineId = num;
            }
                this.popupLines = false
        },
        audioPlay(voice,name){ //音频播放
            // console.log(voice)
            if(this.audioUrl == voice){
                this.$refs.audioX.startPlayOrPause()
            }else {

                if(this.audioUrl != null){
                    this.$refs.audioX.pause()
                }
                this.audioUrl =voice
                this.audioName =name
                setTimeout(() => {
                    this.$refs.audioX.play()
                },50)    
            }
            
        },
        getMax(max){ //获取音频最大时间
            // console.log(max)
            this.audioData.maxTime =max
            this.audioDataPlay.maxTime =max
        },
        getPlayStatus(status){  //获取音频播放状态
            this.audioData.playing= status
            this.audioDataPlay.playing= status
            // console.log(status)
        },
        getCurrentTime(time){ //当前时间
            if (this.popupDetails != null) {
                if (this.audioUrl == this.popupDetails.voice) {
                    if (this.audioData.maxTime == 0) {
                        this.audioData.maxTime = this.audioDataPlay.maxTime
                    }else{
                        this.audioDataPlay.maxTime = this.audioData.maxTime
                    }
                    this.audioData.currentTime = time
                    this.audioData.value = this.audioData.currentTime/this.audioData.maxTime*100

                    this.audioDataPlay.value = this.audioData.value
                    // let status = this.
                    this.audioData.playing = this.audioDataPlay.playing
                }else {
                    
                    this.audioData.currentTime = 0
                    this.audioData.value = 0
                    this.audioData.playing = false
                    this.audioData.maxTime = 0
                }
            }
            this.audioDataPlay.currentTime =this.audioData.currentTime


            // this.audioData.currentTime = time
            // this.audioData.value = this.audioData.currentTime/this.audioData.maxTime*100
        },
        getToTime(time){ //到音频时间跳动
            console.log('c:'+this.audioData.playing)
            this.$refs.audioX.changeCurrentTime(time)
            console.log('d:'+this.audioData.playing)
        },
        getMusic(i){ //获取地图弹窗
            // console.log(i)
            this.popupDetails  = this.mapData.scenics[i]

            this.isAudio()

            

            this.popupShow = true
        },
        getPlayId(i){ //获取播放音频序号
            if(this.audioUrl == this.mapData.scenics[i].voice){
                this.$refs.audioX.startPlayOrPause()
            }else {
                if(this.audioUrl != null){
                    this.$refs.audioX.pause()
                }
                this.audioUrl =this.mapData.scenics[i].voice
                this.audioName =this.mapData.scenics[i].name
                setTimeout(() => {
                    this.$refs.audioX.play()
                },50)    
            }
        },
        getPlayId2(i){ //获取播放音频序号
            console.log(this.audioUrl+'======='+this.mapData.scenics[i].voice)
            if(this.audioUrl == this.mapData.scenics[i].voice){
                // if(!this.audioData.playing){
                //     this.$refs.audioX.play()
                // }
            }else {
                this.audioUrl =this.mapData.scenics[i].voice
                this.audioName =this.mapData.scenics[i].name
                setTimeout(() => {
                    this.$refs.audioX.play()
                },50)    
            }
        },
        getPlayId3(){ //获取播放音频序号
            if(this.audioData.playing){
                this.$refs.audioX.pause()
            }
        },
        clearAudio(){

            this.audioData={                
                playing:false,
                value:0,
                currentTime:0,
                maxTime:0
            }
            this.audioDataPlay={               
                playing:false,      
                value:0,
                currentTime:0,
                maxTime:0
            }
            // console.log(this.audioUrl)
            this.audioUrl = null
            this.audioName = null
            // console.log(this.audioUrl)
        },
        isAudio(){
            if(this.popupDetails.voice == this.audioUrl){
                this.audioData.currentTime =this.audioDataPlay.currentTime
                this.audioData.maxTime = this.audioDataPlay.maxTime
                this.audioData.value = this.audioDataPlay.value
            }else{
                this.audioData.currentTime = 0
                this.audioData.value = 0
                this.audioData.playing = false
                this.audioData.maxTime = 0
            }
        }
    }
}
</script>

<style lang="scss">
.index{position: relative; max-width: 750px; height:100vh;  }

.map-height { position: absolute; top: 0; bottom: 44px; width: 100% }

// 弹窗样式
.popup-wrap { 
    height:100vh; 
    .popup-tit { 
        position: relative; height: 42px; line-height: 42px; padding-left: 10px; background: #f7f7f8; color: #000; font-size: 14px; font-weight: bold; 
        .close { position: absolute; height: 42px; width:42px; text-align: center; line-height: 42px; right: 0; top:0; color: #999; }
    }
}

.popup-lines {
    height: 240px;
    .hd {
        position: relative; height: 42px; line-height: 42px; padding-left: 10px;  color: #000; font-size: 14px; border-bottom: 1Px solid #efefef;
        .close { position: absolute; height: 42px; width:42px; text-align: center; line-height: 42px; right: 0; top:0; color: #999; }
    }
    .bd {
        padding: 0 10px;
        li { 
            line-height: 42px; font-size: 12px; position: relative;
            span{ float: right; margin-right: 40px; }
            i{right:10px; top:50%; margin-top: -10px; position: absolute; width:20px; height:20px; background:url('../assets/images/icon-rba-def.png') no-repeat center center; background-size: 100%;}
        }
        .act i{background-image: url('../assets/images/icon-rba_act.png');}
    }
}
.scroll-wrapper{position: absolute; top: 42px; bottom: 0; width:100%; overflow: hidden;}
</style>
